<%@ page 	contentType="text/html; charset=UTF-8" 
		 	import="org.apache.log4j.Logger"
			pageEncoding="UTF-8" 
%>
<%! 
	final static private Logger LOGGER = Logger.getLogger("org.javaongems.server.view.jsp.SampleUploadForm");
%>
<% 
  if (LOGGER.isDebugEnabled()) LOGGER.debug("sample-upload-form.jsp");

  String ctx = request.getContextPath();
  String ctxWithEndSlash = ctx;
  if (!ctx.endsWith("/"))
	ctxWithEndSlash += "/";

  String baseName = (String) request.getParameter("gemsBaseName");
  String maxUploads = (String) request.getParameter("gemsMaxUploads");
  if (baseName == null)
	baseName = "file[]";
  if (maxUploads == null)
	maxUploads = "5";
%>
<html>
<head>
	<title>Gems::FileUploadForm server-side callee companion</title>
	<script language="javascript">
	var currentUploads = 1; // current # of attachment sections on the web page

	function getMaxUploads() {
	  var field = document.getElementById('maxUploadsField');
	  return Number(field.value);
	}
	
	function addUpload() {
	  var max = getMaxUploads();
	
	  if (currentUploads >= max) {
	    document.getElementById('addupload').style.visibility='hidden';
	  	return;
	  }
	  currentUploads++;
	
	  var nameFile="<%=baseName%>";
	  var newFields = document.getElementById('attachment').cloneNode(true);
	  newFields.id = '';
	  newFields.style.display = 'block';
	
	  var newField = newFields.childNodes;
	  for (var i=0;i<newField.length;i++) {
	    if (newField[i].name==nameFile) {
	      newField[i].id=nameFile+currentUploads;
	      newField[i].name=nameFile;
	    }
	  }
	
	  var insertHere = document.getElementById('attachmentmarker');
	  insertHere.parentNode.insertBefore(newFields,insertHere);
	}
	
	function removeFile(container, item) {
	  var tmp = item.getElementsByTagName('input')[0];
	  var basefieldname = "<%=baseName%>";
	  var iRemove=Number(tmp.id.substring(basefieldname.length, tmp.id.length));
	  var x = document.getElementById('attachments').getElementsByTagName('input');
	  for (i=0;i<x.length;i++) {
		var iEdit = Number(x[i].id.substring(basefieldname.length, x[i].id.length));
		if (iEdit>iRemove)
			x[i].id=basefieldname+(iEdit-1);
	  }
	
	  currentUploads--;
	  container.removeChild(item);
	  document.getElementById('addupload').style.visibility='visible';
	  if (currentUploads==1)
	  	document.getElementById('addupload').childNodes[0].data='another';
	}

	if (currentUploads >= getMaxUploads()) 
	  document.getElementById('addupload').style.visibility='hidden';
	</script>
	<link rel='stylesheet' href='<%=ctxWithEndSlash%>jump.css'>
</head>
<body class="gems-Form">
	<input id="maxUploadsField" type="hidden" value="<%=maxUploads%>"/>

	<div id="attachment" class="attachment" style="display:none">
		<input id="file" name="<%=baseName%>" type="file" size="35" />
		<a href="#" onclick="javascript:removeFile(this.parentNode.parentNode,this.parentNode);">remove</a>
	</div>

	<form id="gemsHttpPostForm" name="HttpPostForm" action="" method="post" encType="multipart/form-data">
		<div><input id="<%=baseName%>0" name="<%=baseName%>" type="file" size="35" />&nbsp;<a id="addupload" href="javascript:addUpload()">another</a></div>
		<div id="attachments" class="container"><span id="attachmentmarker"></span></div>
		<div id="gemsHiddenInputs"></div>
	</form>
</body>
</html>